<template>
  <div class="content">
    <div class="title">
        <p>{{init.title}}</p>
    </div>
    <div class="passout">
        <div class="title">
            <p>请选择培训类型</p>
        </div>
        <ul>
            <li v-for="item in init.children" :key="item.id" @click="changeLi(item)" :class="item.id==id?'liactive':''"><p>{{item.title}}</p><span>¥{{item.price}}</span></li>
        </ul>
        <div class="btnA">
            <van-button type="primary" block color='#1677ff' @click="goApply">确认</van-button>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            init:{},
            id:'',
        }
    },
    created() {
        this.init = JSON.parse(this.$route.query.obj)
        console.log(this.init,'555');
    },
    methods: {
        changeLi(data){
            this.id=data.id
        },
        //去报名
        goApply(){
            if(!this.id){
                this.$toast.fail('请选择培训类型')
                return
            }
            this.$router.push({
                path:'/apply',
                query:{
                    name:this.init.gz,
                    subjectid:this.init.subjectid,
                    id:this.id
                }
            })
        }   
    },
}
</script>

<style lang="scss" scoped>
.content{
    background: #F5F5F5;
    height: 100vh;
    width: calc(100vw);
    // padding: 0 24px;
    position: relative;
    &>.title{
        // height: 50px;
        width: calc(100%);
        display: flex;
        align-items: center;
        padding: 12px;
        font-size: 16px;
        background: #fff;
    }
    .passout{
        margin-top: 16px;
        background: #fff;
        padding: 12px;
        display: flex;
        flex-direction: column;
        .title{
            font-size: 16px;
            margin: 0;

        }
        ul{
            margin-top: 12px;
            li{
                padding: 10px 12px;
                border:1px solid #1677ff;
                border-radius: 6px;
                display: flex;
                font-size: 18px;
                margin-bottom:12px;
                // font-weight: 600;
                // &:active{
                //     background: #1677ff;
                //     color: #fff;
                // }
                justify-content: space-between;
                align-items: center;
                span{
                    color: #f00;
                    font-size: 14px;
                    font-weight: 600;
                }
            }
            .liactive{
                background: #1677ff;
                color: #fff;
                span{
                    color: #fff;
                }
            }
        }
    }
    .btnA{
        position: fixed;
        bottom:12px;
        background: #fff;
        width: calc(100% - 24px);
        // height: 60px;
    
        // padding: 12px;
        display: flex;
    }
}
</style>